<template>
  <div class="nodeAttrBox">
    <!-- 表格列筛选设置 -->
    <tb-column-filter :all-columns="flowDesignDetailNodeAttrColumns" @updatecolumn="columns = $event">
    </tb-column-filter>
    <!-- 节点属性表格 -->
    <div class="nodeAttrTbBox commonTableSty">
      <a-table
        ref="nodeAttrTable"
        :columns="columns"
        :data-source="lists"
        :pagination="false"
        :scroll="{ y: 400, x: 1000 }"
        row-key="taskId"
        :key="tableVaryKey"
      >
        <span slot="processModeDesc">
          {{ $t('auditWay') }}
          <question-mark-tip
            :tip-title="$t('processModeDesc')"
            :popupContainer="getPopupContainer"
          ></question-mark-tip>
        </span>
        <!-- 自定义审批用户 -->
        <span slot="approverColumn">
          {{ $t('approver') }} <i class="requiredStar">*</i>
        </span>
        <!-- 自定义结果通知 -->
        <span slot="resultNoticeColumn">
          {{ $t('resultNotice') }}
          <question-mark-tip :tip-title="$t('resultNoticeTip')" :popupContainer="getPopupContainer">
          </question-mark-tip>
        </span>
        <!-- 自定义撤回通知 -->
        <span slot="canInstanceCancelNoticeColumn">
          {{ $t('cancelNotice') }}
          <question-mark-tip :tip-title="$t('cancelNoticeTip')" :popupContainer="getPopupContainer">
          </question-mark-tip>
        </span>
        <template slot="flowElementCode" slot-scope="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
        <template slot="flowElementName" slot-scope="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
        <template slot="approvalRole" slot-scope="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
        <template slot="approver" slot-scope="text,record">
          <a-select
            v-if="record.roleCandidatesName"
            v-model="record.assignee"
            disabled
            show-search
            mode="multiple"
            :max-tag="1"
            :class="{ hasError: record.error }"
            :filter-option="filterOption"
            :getPopupContainer="getPopupContainer"
            @change="changeUserIds(record)">
            <a-select-option
              v-for="user in record.roleCandidates"
              :key="user.candidateUserId"
              :value="user.candidateUserId"> {{ user.candidatesName }} </a-select-option>
          </a-select>
          <div v-else>
            <!-- 是指定用户的时候 -->
            {{ Array.isArray(record.assignee)?record.assignee.toString():record.assignee }}
          </div>
        </template>
        <!-- 操作结果 -->
        <template slot="operationResult" slot-scope="text">
          <table-ellipsis :text="$t(text === 1 ? 'opened' : 'closed')"></table-ellipsis>
        </template>
        <!-- 附件 -->
        <template slot="attachment" slot-scope="text,record">
          <a v-if="record.files" @click="showDownload(record.files)">{{ $t('download') }}</a>
          <span v-else>-</span>
        </template>
        <!-- 审核时间 -->
        <template slot="verifyTime" slot-scope="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
        </template>
        <!-- 审核意见 -->
        <template slot="reviewComments" slot-scope="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
        <template slot="canResultNotice" slot-scope="text">
          <table-ellipsis :text="$t(text === 1 ? 'opened' : text === 0 ?'closed':'-')"></table-ellipsis>
        </template>
        <template slot="canInstanceCancelNotice" slot-scope="text">
          <table-ellipsis :text="$t(text === 1 ? 'opened' : text === 0 ?'closed':'-')"></table-ellipsis>
        </template>
        <template slot="remark" slot-scope="text">
          <table-ellipsis :text="text || '-'"></table-ellipsis>
        </template>
      </a-table>
    </div>
    <download-file-dialog ref="downloadFileDialogRef" :files="files"></download-file-dialog>
  </div>
</template>
<script>
import { flowDesignDetailNodeAttrColumns } from './config/list'
import TbColumnFilter from '@/components/TbColumnFilter'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import DownloadFileDialog from '@/views/components/DownloadFile/dialog.vue'
export default {
  props: {
    lists: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {
    TbColumnFilter,
    tableEllipsis,
    QuestionMarkTip,
    DownloadFileDialog
  },
  data () {
    return {
      columns: [],
      flowDesignDetailNodeAttrColumns,
      // 下载文件列表
      files: [],
      tableVaryKey: 'initKey'
    }
  },
  watch: {
    lists (val, old) {
      // console.log(old, val, 'listsssss')
      this.tableVaryKey = 'randomKey' + 'process' + Math.random
    }
  },
  created () {
    this.resetData()
    this.initColumns()
  },
  methods: {
    resetData () {
      this.files = []
    },
    getPopupContainer () {
      return document.querySelector('.ant-modal-wrap')
    },
    initColumns () {
      this.columns = flowDesignDetailNodeAttrColumns.map(item => {
        return {
          ...item
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 打开下载附近弹框
    showDownload (files) {
      this.$refs.downloadFileDialogRef.toggleVisible(true)
      this.files = files
    }
  }
}
</script>
